<template>
	<view>
		<view class="content">
			<view class="u-tabs-box tab-wrapper">
				<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750" bg-color="transparent"></u-tabs-swiper>
			</view>

			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(items, indexs) in shopList" v-key="indexs">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<u-empty v-if="!items.list.length" mode="order"></u-empty>
						<block v-for="(item, index) in items.list" v-key="item.gsId">
							<view class="item fromBox boxShadow">
								<view class="f-c-sb itemLits">
									<view>状态</view>
									<view>{{item.orderStatusStr}}</view>
								</view>
								<view class="f-c-fs itemLits">
									<view class="label">订单编号：</view>
									<view class="value">{{ item.washCarOrderNo }}</view>
								</view>
								<view class="f-c-fs itemLits">
									<view class="label">服务名称：</view>
									<view class="value">{{ item.serviceName  }}</view>
								</view>
								<view class="btn-wrapper f-c-sb">
									<view class="label f-c-fs">
										<view>共{{item.number }}件</view>
										<view style="margin-left: 10rpx;">   实付款：¥{{item.amount }}</view>
									</view>
									<view class="btn" @click="godetail(item.washCarOrderNo )">详情</view>
								
								</view>
							</view>
						</block>
						<u-loadmore v-if="!items.listQuery.noData && items.list.length != 0" :status="'nomore'" :load-text="{ nomore: '没有更多数据了' }" />
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
import { customerWashCarList, customerWashCarTab} from '@/api/index.js';
import { mapGetters, mapMutations } from 'vuex';
export default {
	data() {
		return {
			customerNo:'',
			list: [
				{
					name: '待付款',
					value: '待付款',
					type: 'status'
				},
				{
					name: '待使用',
					value: '待使用',
					type: 'status'
				}
				,
				{
					name: '已使用',
					value: '已使用',
					type: 'delFlag'
				},
				{
					name: '已退款',
					value: '已退款',
					type: 'delFlag'
				},
				{
					name: '已取消',
					value: '已取消',
					type: 'delFlag'
				}
			],
			// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
			current: 0, // tabs组件的current值，表示当前活动的tab选项
			swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			show: false,
			goodsServerName: '',
			searchObj: {
				goodsType: 3,
				showArea: 1
			},
			shopList: [
				{
					listQuery: {
						pageNo: 1,
						pageSize: 20,
						customerNo:'',
						status: 1,
						noData: true
					},
					list: []
				},
				{
					listQuery: {
						pageNo: 1,
						pageSize: 20,
						customerNo:'',
						status: 2,
						noData: true
					},
					list: []
				},
				{
					listQuery: {
						pageNo: 1,
						pageSize: 20,
						customerNo:'',
						status: 3,
						noData: true
					},
					list: []
				},
				{
					listQuery: {
						pageNo: 1,
						pageSize: 20,
						customerNo:'',
						status: 4,
						noData: true
					},
					list: []
				},
				{
					listQuery: {
						pageNo: 1,
						pageSize: 20,
						customerNo:'',
						status: 5,
						noData: true
					},
					list: []
				}
			]
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
		onLoad(option) {
			this.customerNo=JSON.parse(option.param).customerNo
		},
	onShow() {
		this.init();
	},
	onPullDownRefresh() {
		console.log('refresh');
		this.init();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		init() {
			this.shopList[this.current].listQuery.pageNo = 1;
			this.shopList[this.current].listQuery.noData = true;
			this.getlist();
			this.getTabList();
		},
		// tabs通知swiper切换
		tabsChange(index) {
			// this.current = index;
			this.swiperCurrent = index;
		},
		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition(e) {
			let dx = e.detail.dx;
			this.$refs.uTabs.setDx(dx);
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
			let current = e.detail.current;
			this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
			if (this.shopList[current].list.length == 0 && this.shopList[current].listQuery.noData) {
				this.getlist();
			}
		},
		// scroll-view到底部加载更多
		onreachBottom() {
			if (this.shopList[this.current].listQuery.noData) {
				this.getlist();
			}
		},
		godetail(orderNo){
			this.$navigateTo('./carWashOrder',{orderNo})
		},
		getlist() {
			var data = {
				...this.shopList[this.current].listQuery
			};
			data.customerNo=this.customerNo,
			customerWashCarList(data).then(res => {
				console.log(res);
				if (this.shopList[this.current].listQuery.pageNo == 1) {
					this.shopList[this.current].list = res.data;
				} else {
					this.shopList[this.current].list = this.shopList[this.current].list.concat(res.data);
				}
				this.shopList[this.current].listQuery.pageNo += 1;
				if (this.shopList[this.current].listQuery.pageSize != res.data.length) {
					this.shopList[this.current].listQuery.noData = false;
				}
			});
		},
		getTabList() {
			var data = {
				customerNo:this.customerNo
			};

			customerWashCarTab(data).then(res => {
				console.log(res);
				if (res.data) {
					this.list[0].name = this.list[0].value + `(${res.data.stayPay})`;
					this.list[1].name = this.list[1].value + `(${res.data.unused})`;
					this.list[2].name = this.list[2].value + `(${res.data.hasBeenUsed})`;
					this.list[3].name = this.list[3].value + `(${res.data.hasRefunded})`;
					this.list[4].name = this.list[4].value + `(${res.data.cancel})`;
				} else {
					this.list[0].name = this.list[0].value + `(0)`;
					this.list[1].name = this.list[1].value + `(0)`;
					this.list[2].name = this.list[2].value + `(0)`;
					this.list[3].name = this.list[3].value + `(0)`;
					this.list[4].name = this.list[4].value + `(0)`;
				}
			});
		},
		search(value) {
			this.shopList[this.current].listQuery.goodsServerName = value;

			this.init();
		},

		inquire() {
			for (let key in this.searchObj) {
				this.shopList[this.current].listQuery[key] = this.searchObj[key];
			}
			this.show = false;
			this.shopList[this.current].listQuery.goodsServerName = this.goodsServerName;
			this.shopList[this.current].listQuery.pageNo = 1;
			this.init();
		}
	}
};
</script>
<style lang="less">
.content {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
	background: #f5f5f5;
	box-sizing: border-box;
	swiper {
		flex: 1;
		swiper-item {
			height: 100%;
			scroll-view {
				padding-bottom: 150rpx;
				box-sizing: border-box;
			}
		}
	}
	/* 	.tab-wrapper {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	} */
	.item {
		padding: 20rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
		width: 700rpx;
		background: #ffffff;
		border-radius: 5rpx;
		.title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 20rpx;
		}
		.btn-wrapper {
			margin-top: 30rpx;
			border-top: 1px solid #ebebeb;
			padding: 20rpx 0;
			box-sizing: border-box;
			.btn {
				width: 168rpx;
				height: 60rpx;
				border: 1rpx solid #177fff;
				border-radius: 31rpx;
				font-size: 28rpx;
				font-weight: bold;
				text-align: center;
				color: #177fff;
				line-height: 60rpx;
			}
			.operation {
				font-size: 28rpx;
				font-weight: bold;
				text-align: center;
				color: #177fff;
				line-height: 60rpx;
				.line {
					width: 2rpx;
					height: 34rpx;
					background: #dfdfdf;
					margin: 0 20rpx;
				}
			}
		}
		.remark {
			font-size: 24rpx;
			font-weight: bold;
			text-align: left;
			color: #999999;
			image {
				width: 26rpx;
				height: 26rpx;
				margin-right: 10rpx;
				vertical-align: middle;
			}
		}
		.itemLits {
			margin: 9rpx 0;
			&.red {
				.label,
				.value {
					color: #ff6738;
				}
			}
			.f-c-fs {
				flex: 1;
			}
			.label {
				font-size: 26rpx;
				font-weight: 500;
				color: #999999;
				line-height: 35rpx;
			}
			.value {
				font-size: 26rpx;
				font-weight: 500;
				color: #333;
				line-height: 35rpx;
			}
		}
	}
	.creat {
		width: 750rpx;
		height: 98rpx;
		background: #177fff;
		font-size: 32rpx;
		font-weight: 700;
		text-align: center;
		color: #ffffff;
		line-height: 98rpx;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	.search {
		width: 100%;
		margin: 20rpx 0;
		.con {
			width: 567rpx;
			height: 72rpx;
			opacity: 1;
			background: #ffffff;
			border-radius: 8px;
			font-size: 24rpx;
			font-weight: 500;
			text-align: left;
			color: #cdcdcd;
			box-sizing: border-box;
		}
		.filtrate {
			width: 128rpx;
			height: 72rpx;
			background: #3992ff;
			border-radius: 8rpx;
			font-size: 28rpx;
			font-weight: 700;
			color: #ffffff;
			text-align: center;
			line-height: 72rpx;
			margin-left: 10rpx;
		}
	}
	.popupCon {
		width: 600rpx;
		padding: 60rpx 0 30rpx 30rpx;
		box-sizing: border-box;
		.title {
			font-weight: bold;
			margin: 30rpx 0;
		}
		.confrim-btn {
			margin-top: 100rpx;
		}
	}
}
</style>
